<%@page import="com.liferay.portal.service.ListTypeServiceUtil"%>
<%@page import="com.liferay.portal.model.ListType"%>
<%@page import="com.liferay.portal.theme.ThemeDisplay"%>
<%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<%@ include file="/init.jsp"%>


<portlet:defineObjects />
<portlet:resourceURL var="ajaxCallResourceURL" />

<liferay-ui:error key="application-type-mandatory" message="application-type-mandatory" />

<liferay-portlet:actionURL name="computeChargesCalculator" var="computeChargesCalculator"></liferay-portlet:actionURL>


<div id="main">
	<h1>CHARGES CALCULATOR</h1>
	<div class="content"> 
		<p> <span class="notforsale">You Can use this Land Calculator to Compute Charges!</span></p>
		<p>Select a Service and Compute the Fees you would be paying:</p>
	 	<aui:form action="<%=computeChargesCalculator.toString() %>" method="post" name="computeChargesCalculator_fm">
	
			<table border="0" cellpadding="5" cellspacing="0" width="75%">
			<tr>
			<td width="55%" align="left">
			<aui:select label="Select a Transaction Type" inlineField="true"  name="applicationType" id="form-element">
						<option value="" selected="selected" >Select a Transaction Type</option>
						<option value="Individual" >Individual Application</option>
						<option value="Organisation">Organization Application</option>
			</aui:select>
	   		</td>
	   		<td>
	   		<%
					List<ListType> layoutName = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.layout");
					
					%>
					
					<aui:select name="layout" label="Zone/Layout<span class='mandatoryfld'>*</span>">
						<option style="font-style: italic; color: #A0A0A4" value="">--Please Select Layout--</option>
				  	
				  	<%
				   
				  	for(int i=0; i<layoutName.size(); i++){
				  		ListType _layoutName = layoutName.get(i);
				  	%>	
				  	<aui:option 
		                  		value="<%=_layoutName.getName() %>"><%=_layoutName.getName()  %></aui:option>
				  	<%
				  	}
				  	%>
					</aui:select>
	   		</td>
			</tr>
			<tr>
			<td>
			<%
					List<ListType> propTypes = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.property_type");
					
					%>
					
					<aui:select name="propertyType" label="Property Type<span class='mandatoryfld'>*</span>">
						<option style="font-style: italic; color: #A0A0A4" value="">--Please Select Type--</option>
				  	
				  	<%
				   
				  	for(int i=0; i<propTypes.size(); i++){
				  		ListType _propType = propTypes.get(i);
				  	%>	
				  	<aui:option 
		                  		value="<%=_propType.getName() %>"><%=_propType.getName()  %></aui:option>
				  	<%
				  	}
				  	%>
					</aui:select>
			</td>
			</tr>
			<tr>
			<td>
			<%
						List<ListType> useTypes = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.land_use");
						
						%>
						<aui:select name="useType" label="Specify Required Land Use<span class='mandatoryfld'>*</span>"
								onChange='<%= renderResponse.getNamespace() + "getPropertyUse(" + renderResponse.getNamespace()  + "useType.value);" %>'>
							<option value="">-Please Select Land Use-</option>
					  	
					  	<%
					  	for(int i=0; i<useTypes.size(); i++){
					  		ListType _useType = useTypes.get(i);
					  	%>	
					  	<aui:option 
			                  		value="<%=_useType.getName() %>"><%=_useType.getName()  %></aui:option>
					  	<%
					  	}
					  	%>
						</aui:select>
			</td>
			<td>
			<aui:select  name="purpose" label="Specify Purpose<span class='mandatoryfld'>*</span>"  />
			</td>
			</tr>
			<tr>
			<td>
			<aui:input name="area" label="Area <span class='mandatoryfld'>*</span>"></aui:input>
			</td>
			<td>
			<%
					List<ListType> unitName = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.uom");
					
					%>
					
					<aui:select name="unit" label="Unit of Measurement<span class='mandatoryfld'>*</span>">
						<option style="font-style: italic; color: #A0A0A4" value="">--Please Select unit--</option>
				  	
				  	<%
				   
				  	for(int i=0; i<unitName.size(); i++){
				  		ListType _unitName= unitName.get(i);
				  	%>	
				  	<aui:option 
		                  		value="<%=_unitName.getName() %>"><%=_unitName.getName()  %></aui:option>
				  	<%
				  	}
				  	%>
					</aui:select>
			</td>
			<tr>				
	    	<td>
	    	<br>
	    		<aui:button type="cancel" value="compute"></aui:button>
	   		</td>
	   		</tr>
			<tr>
				<td>
	
				</td>
			</tr>
			</table>
		</aui:form>
	</div>
	
</div>	
<aui:script>
	Liferay.provide(window,
		'<portlet:namespace />getPropertyUse',
		function(landUse) {
		alert(landUse)
			var A = AUI();
			var url = '<%= ajaxCallResourceURL.toString() %>';
				A.io.request(
					url,
					{
						//data to be sent to server
						data: {
							<portlet:namespace />landUse: landUse,
							<portlet:namespace />queryType: 'landUse',
						},
						dataType: 'json',

						on: {
							failure: function() {
							},

							success: function(event, id, obj) {
								var instance = this;


								//JSON Data coming back from Server
								
								var message = instance.get('responseData');
								
								var stateId = message.stateId;
								
						document.getElementById('<portlet:namespace />purpose').options.length = 0;
						var oFieldSelect= document.getElementById('<portlet:namespace />purpose');
									var state = document.createElement('option');  
									state.appendChild(document.createTextNode("-Please specify purpose-"));
									oFieldSelect.appendChild(state);
							if (stateId>0){
								if (message) {
								  for( i=1; i<=stateId; i++){
								    var param = "param_" + i;
									//alert(param);
									var oFieldSelect= document.getElementById('<portlet:namespace />purpose');
									var state = document.createElement('option'); 
									
						
									//state.appendChild(document.createTextNode(message." + param + ")); 
									state.appendChild(document.createTextNode(message[param]));
									oFieldSelect.appendChild(state); 
									  
								  }
								}
								else {
									alert('no data back from server');
								}
								}
							else{
								var oFieldSelect= document.getElementById('<portlet:namespace />purpose');
									var state = document.createElement('option');  
									state.appendChild(document.createTextNode("-Not available-"));
									oFieldSelect.appendChild(state); 
								}
							}

						}
					}

				); //END of io Request

		},
		['aui-io']
	);  //End of Provide
	
</aui:script>